/*
 * @Description: 时间选择器
 * @Author: buwei.huang
 * @Date: 2019-07-23 18:19:31
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-11 17:43:57
 */
<template>
  <mock-shade
    ref="shade"
    @hide="hide"
  >
    <!-- <transition
      name="slide-fade"
      v-on:after-leave="leave"
      v-on:after-enter="enter"
    > -->
    <div
      class="picke"
      :class="isPicker ? 'pickeHeight' : ''"
      @click.stop
    >
      <div class="picker_head flex-h flex-hsb flex-vc">
        <div
          class="fontsize32 baseColorNoAcitve picker_head_left"
          @click="onCancle"
        >
          取消
        </div>
        <div class="picker_head_title">
          {{titleText}}
        </div>
        <div
          class="fontsize32 baseColorNoAcitve picker_head_right"
          @click="onSubmit"
        >
          确定
        </div>
      </div>
      <Picker
        :slots="slots"
        @change="onValuesChange"
      />
    </div>
    <!-- </transition> -->
  </mock-shade>
</template>
<script>
import { Picker } from 'mint-ui'
import Shade from '@/components/Shade'
export default {
  components: {
    Picker,
    'mock-shade': Shade
  },
  props: {
    // 标题
    titleText: {
      type: String,
      default: ''
    },
    // 时间戳
    dateTime: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      // dateTime: 1566809288000, // 1568098800, // 1599721200 1568098800 // 1568476800
      isPicker: false,
      dateValue: [], // 选择后的值
      pickerHeight: '',
      slots: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center'
        }, {
          flex: 1,
          values: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          className: 'slot2',
          textAlign: 'center'
        },
        {
          flex: 1,
          values: [],
          className: 'slot2',
          textAlign: 'center'
        },
        {
          flex: 1,
          values: ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30'],
          className: 'slot2',
          textAlign: 'center',
          defaultIndex: 16
        }
      ]
    }
  },
  mounted() {
    this._initDate()
  },
  watch: {
    startTime(val) {
      this._initDate()
    }
  },
  methods: {
    _initDate() {
      this.nowDate = new Date()
      this.nowYear = this.nowDate.getFullYear()
      this.nowMonth = this.nowDate.getMonth() + 1
      this.nowDay = this.nowDate.getDate()
      this.endDate = new Date(this.dateTime)
      this.endYear = this.endDate.getFullYear()
      this.endMonth = this.endDate.getMonth() + 1
      this.endDay = this.endDate.getDate()
      // console.warn(this.nowDate, this.endDate, this.defaultDate)
      let slotsYear = []
      let slotsDay = []
      slotsYear = [this.nowYear]
      if (this.endYear > this.nowYear) {
        // 处理年
        let num = this.endYear - this.nowYear
        for (let i = 0; i < num; i++) {
          slotsYear.push(this.nowYear + i + 1)
        }
      }
      // 处理月
      // this.slots[1].defaultIndex = this.nowMonth - 1
      // 处理日
      let date = new Date(this.nowYear, this.nowMonth, 0)
      let dateNum = date.getDate()
      for (let i = 1; i <= dateNum; i++) {
        slotsDay.push(i + '日')
      }
      this.slots[0].values = slotsYear
      this.slots[2].values = slotsDay
      // this.slots[2].defaultIndex = this.nowDay - 1
      // 处理默认值
      if (dateNum === this.nowDay) {
        if (this.nowMonth === 12) {
          this.slots[0].defaultIndex = 1
          this.slots[1].defaultIndex = 0
          this.slots[2].defaultIndex = 0
        } else {
          this.slots[1].defaultIndex = this.nowMonth
          this.slots[2].defaultIndex = 0
        }
      } else {
        this.slots[1].defaultIndex = this.nowMonth - 1
        this.slots[2].defaultIndex = this.nowDay
      }
    },
    onValuesChange(picker, values) {
      // console.log(11111)
      let valuesMonth = Number(values[1].split('月')[0])
      // 处理日
      let slotsDay = []
      let date = new Date(values[0], valuesMonth, 0)
      let dateNum = date.getDate()
      for (let i = 1; i <= dateNum; i++) {
        slotsDay.push(i + '日')
      }
      picker.setSlotValues(2, slotsDay)
      if (this.endYear > this.nowYear) {
        if (values[0] === this.nowYear) {
          // 限制月
          if (Number(values[1].split('月')[0]) < this.nowMonth) {
            picker.setSlotValue(1, this.slots[1].values[this.nowMonth - 1])
          }
          // 限制日
          if (this.nowMonth === Number(values[1].split('月')[0])) {
            if (Number(values[2].split('日')[0]) < this.nowDay) {
              picker.setSlotValue(2, this.slots[2].values[this.nowDay - 1])
            }
          }
        }
        if (values[0] === this.endYear) {
          // 限制月
          if (Number(values[1].split('月')[0]) > this.endMonth) {
            picker.setSlotValue(1, this.endMonth + '月')
          }
          // 限制日
          if (this.endMonth === Number(values[1].split('月')[0])) {
            if (Number(values[2].split('日')[0]) > this.endDay) {
              picker.setSlotValue(2, this.endDay + '日')
            }
          }
        }
      } else {
        // 限制月
        if (Number(values[1].split('月')[0]) > this.endMonth) {
          picker.setSlotValue(1, this.endMonth + '月')
        } else if (Number(values[1].split('月')[0]) < this.nowMonth) {
          picker.setSlotValue(1, this.slots[1].values[this.nowMonth - 1])
        }
        // console.warn(this.endMonth, Number(values[1].split('月')[0]))
        // 限制日
        if (this.endMonth === Number(values[1].split('月')[0]) && this.nowMonth === Number(values[1].split('月')[0])) {
          if (Number(values[2].split('日')[0]) > this.endDay) {
            picker.setSlotValue(2, this.endDay + '日')
          } else if (Number(values[2].split('日')[0]) < this.nowDay) {
            picker.setSlotValue(2, this.slots[2].values[this.nowDay - 1])
          }
        } else if (this.endMonth === Number(values[1].split('月')[0])) {
          if (Number(values[2].split('日')[0]) > this.endDay) {
            picker.setSlotValue(2, this.endDay + '日')
          }
        } else if (this.nowMonth === Number(values[1].split('月')[0])) {
          if (Number(values[2].split('日')[0]) < this.nowDay) {
            picker.setSlotValue(2, this.slots[2].values[this.nowDay - 1])
          }
        }
      }
      this.dateValue = {
        dateValueArr: picker.getValues(),
        title: this.titleText
      }
      let indexArr = []
      this.dateValue.dateValueArr.map((item, index) => {
        indexArr.push(this.slots[index].values.indexOf(item))
      })
      this.dateValue.indexArr = indexArr
      // console.log(this.dateValue)
    },
    show() {
      this.$emit('isHidden', true)
      this.$refs.shade.show()
      // 不延迟没有动画效果
      setTimeout(() => {
        this.isPicker = true
      }, 100)
    },
    hide() {
      this.$emit('isHidden', false)
      this.isPicker = false
      setTimeout(() => {
        this.$refs.shade.hide()
      }, 500)
    },
    // leave: function () {
    //   // document.body.removeChild(this.$el)
    //   // 启用body的滚动条
    //   document.body.style.overflow = 'auto'
    // },
    // enter: function () {
    //   // 禁用body的滚动条
    //   document.body.style.overflow = 'hidden'
    // },
    // 点击确定，将值传到上层处理
    onSubmit() {
      // console.log(this.dateValue)
      let data = this.dateValue.dateValueArr
      let dateStr = data[0] + '/' + data[1].split('月')[0] + '/' + data[2].split('日')[0] + ' ' + data[3]
      let date = new Date(dateStr)
      this.dateValue.newDate = date
      // console.log(this.dateValue)
      this.$emit('getValue', this.dateValue)
      this.hide()
    },
    // 取消
    onCancle() {
      this.hide()
    }
  }
}
</script>
<style>
.picker_wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.picke {
  width: 100%;
  height: 0;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999;
  overflow: hidden;
  transition: all 0.5s;
}
.pickeHeight {
  height: 554px;
}
.picker_head {
  height: 112px;
  padding: 0 32px;
}
.picker_head_left {
  color: #999999;
  line-height: 44px;
}
.picker_head_right {
  line-height: 44px;
}
.picker_head_title {
  font-size: 18px; /* no */
  line-height: 50px;
}
.picker-item {
  font-size: 14px; /* no */
}
/* .slide-fade-enter-active,
.slide-fade-leave-active {
  transition: height 0.5s;
}
.slide-fade-enter, .slide-fade-leave-to {
  height: 0;
} */
</style>
